<template>
  <ul class="healthlist">
    <li class="healthlistItem" @click="goDetail(item.id)" v-for="item of healthlist" :key = "item.id">
      <div class="healthlistImg">
        <img :src="item.images.small" alt="">
      </div>
      <div class="healthlistInfo">
        <div class="info-title">
          {{ item.title }}
        </div>
        <div class="info-price">
          ￥{{ item.genres }}
        </div>
        <!-- <div class="info-sale">
          低至{{ item.year }}折
        </div> -->
        <div class="info-other">
          <div class="info-other-left">
            <span class="iconfont icon-shoucang1"></span>
            {{ item.rating.average}}
          </div>
          <div class="info-other-right">
            <span class="iconfont icon-comment"></span>
            {{ item.rating.max}}
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['healthlist'],
  methods: {
    goDetail (id) {
      this.$router.push({
        name: 'detail',
        params: { id }
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';

.healthlist {
  width: 100%;
  height: auto;
  padding-left: 0.1rem;
  .healthlistItem {
    @include rect(100%, 1.2rem);
    @include flexbox();
    @include border(0 0 1px 0, #ccc, solid);
    padding: 0.1rem 0;
    .healthlistImg {
       @include rect(1rem, 1rem);
      img {
        @include rect(0.9rem, 0.9rem);
        @include margin(0.05rem 0.05rem 0.05rem 0.05rem);
      }
    }

    .healthlistInfo {
      display: flex;
      margin-left: 0.1rem;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .info-title {
        width: 100%;
        height: 0.4rem;
        font-size: 16px;
        color: #101010
      }
      .info-price {
        width: 100%;
        height: 0.3rem;
        font-size: 16px;
        color: #fa2a83
      }
      // .info-sale {
      //   width: 100%;
      //   height: 0.2rem;
      //   font-size: 14px;
      // }
      .info-other {
        width: 100%;
        height: 0.2rem;
        font-size: 14px;
        color: #8d8585;
        .info-other-left, .info-other-right {
          width: 0.5rem;
          height: 100%;
          float: left;
          span {
            display: block;
            width: 0.18rem;
            height: 0.2rem;
            float: left;
            font-size: 14px
          }
        }
      }
    }
  }
}
</style>
